import React, { useState } from 'react'
import { Select, Button, Upload, message, Input } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import axios from "axios"

function Tab1() {
    const [loading, setLoading] = useState(false)
    const [imageUrl, setimageUrl] = useState("")
    //获取tab1的input
    const [val1, setValue1] = useState("")
    const [val2, setValue2] = useState("")
    const getBase64 = (img: any, callback: any) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

    const beforeUpload = (file: any) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
    }
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>)
    const handleChange = (info: any) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (imageUrl: any) => {
                setLoading(false)
                setimageUrl(imageUrl)
            }
            );
        }
    }
    const { Option } = Select;
    const [categories, setcategories] = useState([])
    const handleChange1 = (value: any) => {
        console.log(`selected ${value}`);
        axios.get("http://localhost:3333/admin/api/rest/items").then(res => {
            console.log(res)
            setcategories(res.data)
        })
    }
    return (
        <div>
            <div>
                <p >
                    <span style={{ marginRight: "10px" }}>英雄名称</span><Input className="name" onChange={(e) => {
                        setValue1(e.target.value)
                    }} />
                </p>
                <p >
                    <span style={{ marginRight: "10px" }}>英雄称号</span> <Input className="hero" onChange={(e) => {
                        setValue2(e.target.value)
                    }} />

                </p>
                <p>
                    <span style={{ marginRight: "10px" }}>英雄定位</span>
                    <Select
                        mode="multiple"
                        style={{ width: '100%' }}
                        placeholder="选择出装"
                        defaultValue={['极影']}
                        onChange={handleChange1}
                        optionLabelProp="label"
                    >
                        {
                            categories.map((item: any, index: number) => {
                                return (
                                    <Option value={item.name} label={item.name} key={index}>
                                        <div className="demo-option-label-item">
                                            <span role="img" aria-label={item.name}>
                                            </span>
                                            {item.name}
                                        </div>
                                    </Option>
                                )
                            })
                        }



                    </Select>
                </p>
                <div> <span style={{ marginRight: "10px" }}>英雄头像</span>
                    <Upload
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                    <Button type="primary" onClick={() => {
                        axios.post("http://localhost:3333/admin/api/rest/heros", {
                            // cate: val1,
                            // partners: val2,
                            // restraint: "中国"
                        }).then(res => {
                            // console.log(res)
                        })
                        axios.get("http://localhost:3333/admin/api/rest/heros?pagenum=1&pagesize=5").then(res => {
                            console.log(res)
                        })
                    }} >保存</Button>

                </div>
            </div>
        </div>
    )
}

export default Tab1
